<template>
    <div class="event">
        <div class="eventTitle">
            <i class="icon-third icon-third-tongzhi"></i>
            <span>最新事件通知</span>
            <!-- <button @click="handleClick(1)" :class="itemIndex===1?'active':'default'">异常事件</button> -->
            <!-- <button @click="handleClick(0)" :class="itemIndex===0?'active':'default'">所有事件</button> -->
        </div>
        <div class="noData" v-if="nodata">暂无数据</div>
        <el-row class="eventContent" v-else>
            <el-popover
                placement="left"
                trigger="hover"
                width="300"
                @show="handlePopoverShow(info.id,info.imgsrc)"
                v-for="info in getInfo" :key="info.id">
                <img src="" alt="" onerror="src='../../static/imgError.png'" :ref="'eventImg'+info.id">
                <el-col slot="reference" :span="24" class="eventContentItem" :class="info.activeRowName">
                    <el-col :span="15">
                        <p>{{info.datetime}}</p>
                    </el-col>
                    <el-col :span="9">
                        <i class="icon-third" :class="info.iconClass"></i>
                        <span>{{info.event}}</span>
                    </el-col>
                    <el-col :span="24">
                        <p>{{info.road_name}}</p>
                    </el-col>
                </el-col>
            </el-popover>
           
        </el-row>   
        <div class="eventFooter">
            <el-button icon="el-icon-search" @click="selectAll">更多</el-button>
        </div>   
    </div>
	
</template>
<script>
    import util from '../util/util'
	export default {
		data:function(){
            return {
                socketId:'',
                itemIndex:0,
                nodata:false,
                maxId:-1,
                listData:[],
                timer:null,
                showId:""
            }   
        },
        computed:{
            getInfo:function(){
                //解除双向绑定
                let tmp = JSON.parse(JSON.stringify(this.listData));
                return tmp.reverse();
            }
        },
        watch:{
            listData:function(){
                if(this.listData.length>50){
                    this.listData.shift();
                }
            }
        },
        //socket.io
        sockets:{
            //初始化组件会自动执行connect方法和message方法
            connect: function(val){  //这里是监听connect事件
                // console.log("connect :",val+",id:"+this.$socket.id);
                this.socketId = this.$socket.id;
            },
            //根据服务端定义的事件方法命名
            // message: function(data){
            //     console.log('message id:',this.socketId);
            //     console.log(data);
            //     // this.processData(data);
            // },
            latest_event: function(data){
                this.processData(data.events);
            }
        },
        created(){
            //  this.realTimeUpdate();
            
        },
        mounted(){
            //从其他页面通过路由进入该组件时，socket不会再自动执行connect，需要在mounted手动触发connect
            this.$socket.emit('connect',"mounted"); 
            //订阅最新事件
            this.$socket.emit('subscribe_latest_event',{'top':100,'interval':1});
        
        },
        destroyed(){
            clearInterval(this.timer);
            this.timer = null;
        },
        methods:{
            //测试-----------
            addHistoryEvent(){
                let params = {
                    "road_name":"Shanghai Road test"+Math.ceil(Math.random()*10),
	                "event":"行人逆行"+Math.random()
                };
                this.$api.historyEvent.addHistoryEvent(params).then(response => {

                });
            },
            //利用定时器实现实时更新
            realTimeUpdate(){
                this.timer = setInterval(()=>{
                    this.addHistoryEvent();
                    // this.fetchLatestEvent();
                },1000)
            },
            fetchLatestEvent(){
                let params = {
                    page_index: 1,
                    page_size: 10,
                    Max_Id: this.maxId
                };
                this.$api.historyEvent.historyEventLatestList(params).then(response => {
					if(response.data.code=="6000"){
						let data;
						try {	
                            data= response.data.data.holidays.reverse();
                            if(this.maxId == -1 && data.length == 0){
                                this.nodata = true;
                            }else{
                                this.nodata = false;
                                this.maxId = response.data.data.Max_Id;
                                this.processData(data);
                            }
							
						} catch (error) {
                            // console.log("111,",error);
                            clearInterval(this.timer);
                            this.timer = null;
							return false;
						}
					}else{
                        // console.log("222");
						this.$message({
                            message: util.getErrorInfo(response.data.code),
                            type: 'error'
                        });
                        clearInterval(this.timer);
                        this.timer = null;
					}
				}).catch(error => {
                    clearInterval(this.timer);
                    this.timer = null;
				});
            },
            processData(data){
				for(var i=0;i<data.length;i++){
                    let eventdata = {};
                    eventdata["id"] = data[i]["id"];
                    eventdata["event"] = data[i]["event"];
                    eventdata["activeRowName"] = this.getActiveRowName(data[i]["event"]);
					eventdata["road_name"] = data[i]["road_name"];
                    eventdata["datetime"] = data[i]["starttime"];
                    eventdata["iconClass"] = util.getIconClass(data[i]["event"]);
                    eventdata["imgsrc"] = data[i]["p_path"];
					this.listData.push(eventdata);
				}
            },
            getActiveRowName(event){
                if (event === "行人入侵") {
                    return 'peopleRow';
                } else if (event === "停车") {
                    return 'stoppingRow'
                }
                return '';
            },
            handleClick(message){
                this.itemIndex = message;
            },
            selectAll(){
                 this.$router.push({path:"/history"});
                // this.$router.push({path:"/history",query:{eventType:this.itemIndex}});
            },
            handlePopoverShow(id,src){
                this.$refs["eventImg"+id][0].src = src;
            }
        }
	}

</script>

<style scoped lang="scss">
@import "../assets/basic.scss";
.event{
    width: 100%;
    height: 100%;
    //border-radius: 4px;
    position: relative;
    background:url("/static/eventbg.png") no-repeat center;
    background-size:100% 100%;
    .eventTitle{
        width: 100%;
        height: 50px;
        line-height: 50px;
        text-indent: 10px;
        background-color: none;
        color: #fff;
        span{
            padding-left: 5px;
        }
        button{
            height: 35px;
            line-height: 35px;
            padding: 0 3%;
            border: none;
            float: right;
            margin-top: 15px;
            outline: none;
        }
        .active{
            color: $ims-text-active-color;
            background: rgba(0,0,0,0);;
        }
        .default{
            color: rgba(0,0,0,0);;
            background: transparent;
        }
    }
    .noData{
        height: calc(100% - 295px);
        padding-top: 200px;
        font-size: 16px;
        text-align: center;
        color: #fff;
    }
    .eventContent{
        height: calc(100% - 95px);
        width: calc(100% - 18px);
        left:9px;
        padding: 10px 1% 0;
        position: relative;
        overflow-y: scroll;
        background:$ims-eventbox-color;
        .eventContentItem{
            padding: 10px 10px 0;
            border-bottom: 1px solid rgb(6, 81, 132);
            overflow: hidden;
            color:#fff;
            img{
                display: block;
                width: 45px;
                height: 45px;
            }
            p{
                margin-bottom: 10px;
            }
            &:hover{
                background: $ims-active-color;
            }
        }
    }
        
    .eventFooter{
        height: 45px;
        text-align: center;
        button{
            background: rgba(0,0,0,0);
            color: #fff;
            border: none;
            width: 100%;
            height: 45px;
            border-radius: 0;
            display: inline-block;
            &:hover{
                color:$ims-text-active-color;
            }
        }
    }

}
</style>